<template>
<view>
	<view class="flex_c">
		<view class="pic" @click="toCity">
			<view class="select" :class="city_id?'select_a':''">{{city_id?city_name:'全国'}}</view>
		</view>		
	<!-- 	<picker class="pic" @change="cityChange" mode = 'selector' :range="cityList" range-key='city_name'>
			<view class="select" :class="city_id?'select_a':''">{{city_id?city_name:'全国'}}</view>
		</picker> -->
		<input type="text" placeholder="请输入活动或文章" v-model="queryData.keywords" />
		<text @click="changeK()">搜索</text>
		<view class="fb_img" @click="jtcXFshow">
			<image class="" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/plus.png" mode=""></image>
		</view>
	</view>
	<view style="width: 100%;height: 40px;"></view>
	<swiper class="swiper" :indicator-dots="true" :autoplay="true" >
		<swiper-item>
			<image class="swiper_item" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/bg1.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper_item" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/bg2.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper_item" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/bg3.png" mode=""></image>
		</swiper-item>
	</swiper>
	<view class="flex_h">
		<view class="item_h" @click="toList1(item.url)" v-for="(item,index) in btnList" :key='index'>
			<image :src="item.img" mode=""></image>
			<view class="">{{item.name}}</view>
		</view>
	</view>
	<view class="flex_h">
		<view class="item_h1 b_c" @click="toList(1)">
			<view class="small">网洽会</view>
			<view class="small1"></view>
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/rili.png" mode=""></image>
		</view>
		<view class="item_h1 o_c" @click="toList(2)">
			<view class="small">招商会</view>
			<view class="small1"></view>
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/shiping.png" mode=""></image>
		</view>
		<view class="item_h1 o_c1" @click="toList(3)">
			<view class="small">专题会</view>
			<view class="small1"></view>
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/huiyuan.png" mode=""></image>
		</view>
	</view>
	<view class="flex_t">
		<view @click="changeT(item.id)" class="item_t" v-for="(item,index) in typeList" :key='index' :class="active==item.id?'active':''">{{item.name}}</view>
	</view>
	<view class="item_l" v-for="(item,index) in hyList" :key='index' @click="toDetail(item)">
		<view class="img">
			<view class="type_t">{{item.type_id==1?'网洽会':item.type_id==2?'招商会':item.type_id==3?'专题会':''}}</view>
			<view class="type_t1" :class="item.timestatus.id==1||item.timestatus.id==2||item.timestatus.id==3?'orange':item.timestatus.id==4?'hui':''">{{item.timestatus.name}}</view>
			<!-- <view class="type_t1" :class="item.timestatus.id==1?'orange':item.timestatus.id==2?'hui':''">{{item.timestatus.name}}</view> -->
			<image v-if='item.thumbimg' :src="item.thumbimg" mode=""></image>
			<image v-else src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/huiyi.jpg" mode=""></image>
		</view>
		<view class="right_l">
			<view class="">{{item.title.length>24?item.title.substring(0,24)+'...':item.title}}</view>
			<view class="bottom">
				<view class="flex_l"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/add.png" mode=""></image>{{item.address}}</view>
				<view class="flex_l"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/time.png" mode=""></image>{{item.starttime+' ~ '+item.endtime}}</view>
			</view>
		</view>
	</view>
	<view class="none_img"  v-if="hyList.length==0">
		<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/zw.png" mode="widthFix"></image>
		<view class="">暂无</view>
	</view>
	<jtcXf ref="jtcXF"></jtcXf>
	<!-- <view-tabbar :current="1"></view-tabbar> -->
	<view :style="'height:' + (paddingBottomHeight + 140) + 'rpx'"></view>
</view>
</template>

<script>
	import Tabbar from '@/components/tabbar.vue'
	import jtcXf from '../../components/jtc-xf/jtc-xf.vue';
	import { city,hy } from '../../utils/api.js'
	export default {
		data() {
			return {
				// cityList:[],
				city_id:'',
				city_name:'',
				paddingBottomHeight:0,
				queryData:{
					keywords:'',
					city_id:'',
					page:1,
				},
				hyList:[],
				active:0,
				btnList:[],
				isNewRenderDone:true,
				typeList:[{id:0,name:'全部'},{id:1,name:'精选推荐'},{id:2,name:'即将开始'},{id:3,name:'进行中'}]
			};
		},
		components: {
			'view-tabbar': Tabbar,
			jtcXf,
		}, 
		onLoad() {
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.paddingBottomHeight = 40;
			            }
			        })
			    }
			});
			this.getBtn()
		},
		onShow(){
			let myCity = uni.getStorageSync('myCity2')
			this.city_name = myCity.name || myCity.city_name||''
			this.city_id = myCity.id||''
			this.queryData.city_id = myCity.id||''
			this.queryData.page=1
			this.getHy()
		},
		onShareTimeline() {
			return {
				title: '会议 | 投资钟祥',
			}
		},
		onShareAppMessage() {
			return {
				title: '会议 | 投资钟祥',
			}
		},	
		beforeDestroy(){
			uni.setStorageSync('yun_chain',{})
			// uni.setStorageSync('myCity2',{city_name:'贵州',id:8})
		},
		methods:{
			toCity(){
				uni.navigateTo({
					url:'/pages/chooseCity2/chooseCity2'
				})
			},
			jtcXFshow(){
				this.$refs.jtcXF.show()
			},
			getBtn(){
				hy.GetModuleType().then(res=>{
					this.btnList= res.data
				})
			},
			getHy(){
				uni.showLoading({ mask:true,
					title: '正在加载',
				})
				this.queryData.status = this.active
				hy.GetMeetingList(this.queryData).then(res=>{
					if(this.queryData.page==1){
						this.hyList = res.data.data
					}else{
						this.hyList = this.hyList.concat(res.data.data)
					}
					uni.hideLoading()
				})
			},
			toDetail(item){
				uni.navigateTo({
					url:`../huiyiDetail/huiyiDetail?id=${item.id}`
				})
			},
			toList(type){
				let type_id = type
				let type_name = type==1?'网洽会': type==2?'招商会': type==3?'专题会':''
				uni.navigateTo({
					url:`../huiyiList/huiyiList?type_id=${type_id}&type_name=${type_name}`
				})
			},
			toList1(url){
				uni.navigateTo({
					url:url
				})
			},
			changeT(id){
				this.active=id
				this.queryData.page=1
				this.getHy()
			},
			// getCity(){
			// 	city({city_id:1}).then(res=>{
			// 		res.data.unshift({id:'',city_name:'全国'})
			// 		this.cityList = res.data
			// 		this.getAdd()
			// 	})
			// },
			// getAdd(){
			// 	let that = this
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		geocode:true,//设置该参数为true可直接获取经纬度及城市信息
			// 			success: function (res) {
			// 				console.log(res)
			// 				that.lat = res.latitude
			// 				that.lng = res.longitude
			// 			},
			// 			fail: function () {
			// 				uni.showToast({
			// 					title: '获取地址失败，将导致部分功能不可用',
			// 					icon:'none'
			// 				});
			// 			} 
			// 	})
			// },
			// cityChange(val){
			// 	let item = this.cityList[val.detail.value]
			// 	this.city_id = item.id
			// 	this.queryData.city_id = item.id
			// 	this.city_name = item.city_name
			// },
			changeK(){
				
			},
			toPage(type){
				uni.navigateTo({
					url:`/pages/${type}/${type}`
				})
			}
		},
		onReachBottom() {
			// 加锁，避免在加载更多时用户频繁下拉导致的重复触发而渲染异常
			if(!this.isNewRenderDone) return;   
			this.isNewRenderDone = false
			// 模拟分页请求 (加载更多)
			this.queryData.page+=1
			this.getHy()
		},
	}
</script>

<style lang="scss" scoped>
	.orange{
		background-color: #ff9933 !important;
	}
	.hui{
		background-color: #aaa !important;
	}
	.item_l{
		width: calc(100% - 20px);
		display: flex;
		padding: 15px 10px;
		border-bottom: 1px solid #C0C0C0;
		.img{
			width: 40%;
			height: 90px;
			margin-right: 10px;
			border-radius: 4px;
			overflow: hidden;
			position: relative;
		}
		.type_t1{
			position: absolute;
			top: 0;
			left: 0;
			background: rgba($color: #000000, $alpha: .5);
			color: #fff;
			padding: 2px 4px;
			font-size: 14px;
		}
		.type_t{
			height: 22px;
			width: 70px;
			text-align: center;
			line-height: 22px;
			background-color: #ff9933;
			color: #fff;
			right: -18px;
			top: 6px;
			font-size: 12px;
			transform: rotate(45deg);
			position: absolute;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.right_l{
			width: calc(60% - 10px);
			font-size: 14px;
			color: #000;
			position: relative;
		}
		.bottom{
			position: absolute;
			bottom: 2px;
			.flex_l{
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #888;
				margin-top: 2px;
				image{
					width: 12px;
					height: 12px;
					min-width: 12px;
					margin-right: 4px;
				}
			}
		}
	}
.flex_t{
	width: calc(100% - 16px);
	padding: 0 8px;
	display: flex;
	// border-bottom: 1px solid #C0C0C0;
	.item_t{
		height: 32px;
		line-height: 32px;
		padding: 0 4px;
		margin: 0 4px;
		font-size: 14px;
		color: #666;
	}
	.active{
		color: #ec5600;
		font-weight: 800;
		font-size: 16px;
		position: relative;
	}
	.active::after{
		content: ' ';
		position: absolute;
		width: 20px;
		height: 2px;
		bottom: 0;
		left: calc(50% - 10px);
		background-color: #ec5600;;
	}
}
.flex_h{
	position: relative;
	width: 96%;
	left: 2%;
	display: flex;
	justify-content: space-between;
	padding-bottom: 20px;
	.item_h{
		width: 18%;
		text-align: center;
		font-size: 13px;
		image{
			width:40px;
			height: 40px;
			margin: 20px 0 2px;
		}
	}
	.item_h1{
		width: 28%;
		border-radius: 4px;
		box-shadow: 0px 2px 5px 0 #ddd;
		height: 42px;
		position: relative;
		padding: 4px 6px;
		image{
			width: 20px;
			height: 20px;
			position: absolute;
			right: 5px;
			bottom: 5px;
		}
	}
	.b_c{
		background-color: rgba($color: #aedaff, $alpha: .6);
	}
	.o_c{
		background-color: rgba($color: #ffe3d7, $alpha: .6);
	}
	.o_c1{
		background-color: rgba($color: #ffeed0, $alpha: .6);
	}
	.small{
		font-size: 13px;
		color: #333;
	}	
	.small1{
		font-size: 12px;
		color: #666;
	}
}
.swiper{
	width: 100%;
	height: 160px;
	.swiper_item{
		width: 100%;
		height:100%;
		image{
			width: 100%;
			height:100%;
		}
	}
}
.flex_c{
		width: 100%;
		// height: 44px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		flex-wrap: wrap;
		top: 0;
		padding-bottom: 4px;
		z-index: 1000;
		background-color: #fff;
		// box-shadow: 0px 2px 5px 0 #ddd;
			input{
				width: calc(100% - 160px);
				padding-left: 20px;
				height: 32px;
				border: 2px solid #FA6400;
				border-radius: 16px;	
			}
			text{
				position: absolute;
				display: inline-block;
				right: calc(3% + 36px );
				height: 28px;
				line-height: 28px;
				border-radius: 14px;
				width: 60px;
				background: linear-gradient(90deg, #FE8E33 0%, #FC5517 100%);
				color: #fff;
				text-align: center;
			}
			.fb_img{
				width: 30px;
				height: 30px;
				border-radius: 15px;
				background:linear-gradient(135deg,#ff9933 0%,#ff6010 100%);
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 20px;
					height: 20px;
				}
			}
}
.pic{
	width: 80px !important;
	text-align: center;
}
.select{
	width: calc(100% - 20px);
	height: 36px;
	color: #666;
	line-height: 36px;
	background-color: #fff;
	border-radius: 4px;
	padding: 0 4px;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	&::after{
		content: ' ';
		position: absolute;
		width: 6px;
		height: 6px;
		border-right: 1px solid #FD6921;
		border-bottom: 1px solid #FD6921;
		transform: rotate(45deg);
		top: 14px;
		margin-left: 10px;
	}
}
.select_a{
	color: #FD6921;
}
.text_a{
	width: calc(100% - 20px);
	background-color: #fff;
	border-radius: 4px;
	height: 110px;
	padding: 10px;
}

</style>
